<!-- @format -->

<template>
	<view>
		<view class="box-slideLeft">
			<view
				class="touch-item touch-slideLeft"
				@touchstart="touchS"
				@touchmove="touchM"
				@touchend="touchE"
				:style="item_show.txtStyle">
				<slot />
			</view>

			<view v-if="offsetLeft > 0"
				class="touch-item del-box-touch-slideLeft cf-shuCenter"
				@click="delItem(item_show)"
				:data-spmCntSuffix="'.touch.delItem@'"
					:data-custom="1"
					:data-spm="item_show">
				<image
					src="https://cdn1.visiotrip.com/h5AndMini/icon_delete_person.png" class="image"></image>
				<text>删除</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	props: {
		data_transit: {
			type: Object,
			default() {
				return {}
			}
		},
		//可不传参
		item: {
			type: Object,
			default() {
				return {}
			}
		},
		canSlide: {
			type: Boolean,
			default: true
		}
	},
	computed: {},

	data() {
		return {
			item_show: {},
			delBtnWidth: 73, //删除按钮宽度单位（rpx）
			startX: "",
			offsetLeft:""
		}
	},
	created: function () {
		//专门处理检查对象中，某字段是否存在的，如果存在返回 true 不存在返回 false
		let that = this
		let item = that.item
		if (!item.hasOwnProperty("txtStyle")) {
			this.$set(this.item, "txtStyle", "") //不需要初始化了
		}
		this.item_show = this.item
	},
	watch: {
		item(e) {
			this.item_show = e
		}
	},
	methods: {
		//点击删除按钮事件
		delItem: function (e) {
			let that = this
			let data = {
				item: e,
				data: that.data_transit
			}
			console.log(e, that.data_transit)
			this.$emit("delItem", data)
		},
		touchS: function (e) {
			if (!this.canSlide) return 
			if (e.touches.length == 1) {
				//设置触摸起始点水平方向位置
				this.startX = e.touches[0].clientX
			}
		},
		touchM: function (e) {
			let that = this
			if (e.touches.length == 1) {
				//手指移动时水平方向位置
				var moveX = e.touches[0].clientX
				//手指起始点位置与移动期间的差值
				var disX = this.startX - moveX
				var delBtnWidth = this.delBtnWidth
				var txtStyle = ""
				if (disX == 0 || disX < 0) {
					//如果移动距离小于等于0，说明向右滑动，文本层位置不变
					txtStyle = "left:0px"
				} else if (disX > 0) {
					//移动距离大于0，文本层left值等于手指移动距离
					txtStyle = "left:-" + disX + "px"
					if (disX >= delBtnWidth) {
						//控制手指移动距离最大值为删除按钮的宽度
						txtStyle = "left:-" + delBtnWidth + "px"
					}
				}
				//获取手指触摸的是哪一项

				that.item_show.txtStyle = txtStyle
			}
		},
		touchE: function (e) {
			let that = this
			if (e.changedTouches.length == 1) {
				//手指移动结束后水平位置
				var endX = e.changedTouches[0].clientX
				//触摸开始与结束，手指移动的距离
				var disX = this.startX - endX
				this.offsetLeft = disX
				var delBtnWidth = this.delBtnWidth
				//如果距离小于删除按钮的1/2，不显示删除按钮
				var txtStyle =
					disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px"
				//获取手指触摸的是哪一项
				that.item_show.txtStyle = txtStyle
			}
		}
	}
}
</script>

<style
	lang="scss"
	scoped>
.box-slideLeft {
	margin: 20rpx 0;
	border-radius: 30rpx;
	.touch-item {
		box-sizing: border-box;
	}
	position: relative;
	overflow: hidden;

	.touch-item {
		position: absolute;
		top: 0;
		//  padding: 10px 10px 10px;
		//  background-color: #FFFFFF;
		// border-radius: 10px;
		overflow: hidden;
	}

	.touch-slideLeft {
		position: relative;
		width: 100%;
		z-index: 5;
		transition: left 0.2s ease-in-out;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.del-box-touch-slideLeft {
		right: 0rpx;
		float: left;
		width: 166rpx;
		height: 100%;
		background-color: $sl-color-red;
		padding-left: 30rpx;
	}
	.cf-shuCenter {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.image {
			width: 30rpx;
			height: 30rpx;
		}
		text {
			font-size: 28rpx;
			font-family: PingFangSC-Regular-, PingFangSC-Regular;
			font-weight: normal;
			color: #ffffff;
		}
	}
}
</style>
